import React, { useEffect, useState } from "react";
import { Empty, Menu, message, Popconfirm } from "antd";
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Usermenuewrap } from "./style";
import Oneessay from "@/pages/Homepage/components/essay";
import { propsinterface } from "@/pages/Homepage/components/essay";
import { deleteessaybyidapi, getbyuserapi } from "@/apis/essay";
import { useDispatch, useSelector } from "react-redux";
import { rootState } from "@/store";
import { usertype } from "@/store/reducers/home";
import { byuserapi, deletecomapi } from "@/apis/comment";
import { commentstate } from "@/pages/Essay/components/comment";
import classNames from "classnames";
import { formattime } from "@/utils";
import { useNavigate, useParams } from "react-router-dom";
import { loginpatch } from "@/store/action/home";
export default function Usermenue() {
  const params: any = useParams();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [collectblog, setCollectblog] = useState<propsinterface[]>([]); //收藏文章
  const [publishblog, setPublishblog] = useState<propsinterface[]>([]); //发表的文章
  const [comment, setAllcomment] = useState<commentstate[]>([]); //发表的评论
  const [which, setWhich] = useState<string>("0"); //显示哪一个部分
  const { user } = useSelector((store: rootState) => ({
    user: store.home.user as usertype,
  }));
  useEffect(() => {
    getbyuserapi(params.id, 0).then((res: any) => {
      setCollectblog(res.result);
    });
    getbyuserapi(params.id, 1).then((res: any) => {
      setPublishblog(res.result);
    });
    byuserapi(params.id).then((res: any) => {
      setAllcomment(res.result);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  //改变显示的内容
  const changeitem: MenuProps["onClick"] = (e) => {
    setWhich(e.key);
  };

  //删除发表的博客
  const confirm = async (id: number) => {
    try {
      await deleteessaybyidapi(id);
      getbyuserapi(params.id, 1).then((res: any) => {
        setPublishblog(res.result);
      });
      message.success("删除成功");
    } catch (e) {
      dispatch(loginpatch({}));
      navigate("/");
      message.error("身份失效");
    }
  };

  //删除发表的评论
  const confirmdeletecomment = async (id: number) => {
    try {
      await deletecomapi(id);
      byuserapi(params.id).then((res: any) => {
        setAllcomment(res.result);
      });
      message.success("删除成功");
    } catch (e) {
      dispatch(loginpatch({}));
      navigate("/");
      message.error("身份失效");
    }
  };

  const cancel = (e: any) => {
    message.error("Click on No");
  };
  return (
    <Usermenuewrap>
      <div className="menue">
        <Menu
          mode="horizontal"
          onClick={changeitem}
          defaultSelectedKeys={["0"]}
        >
          <Menu.Item key={"0"} icon={<MailOutlined />}>
            发表的文章
          </Menu.Item>
          <Menu.Item key={"1"} icon={<AppstoreOutlined />}>
            收藏的文章
          </Menu.Item>
          <Menu.Item key={"2"} icon={<SettingOutlined />}>
            评论
          </Menu.Item>
        </Menu>
      </div>
      <div
        className={classNames({
          maincontent: true,
        })}
      >
        {which === "0" && (
          <div className="publish">
            {publishblog.length > 0 ? (
              publishblog.map((item: propsinterface) => (
                <Oneessay oneassy={item} key={item.id}>
                  {+params.id === user.id ? (
                    <Popconfirm
                      title="你确定删除这篇文章吗"
                      onConfirm={(e) => confirm(item.id)}
                      onCancel={cancel}
                      okText="Yes"
                      cancelText="No"
                    >
                      <span className="iconfont icon-shanchu"></span>
                    </Popconfirm>
                  ) : (
                    <span></span>
                  )}
                </Oneessay>
              ))
            ) : (
              <Empty />
            )}
          </div>
        )}
        {which === "1" && (
          <div className="collect">
            {collectblog.length > 0 ? (
              collectblog.map((item: propsinterface) => (
                <Oneessay oneassy={item} key={item.id}></Oneessay>
              ))
            ) : (
              <Empty />
            )}
          </div>
        )}
        {which === "2" && (
          <div className="comment">
            {comment.length > 0 ? (
              comment.map((item: commentstate) => (
                <div className="onecomment" key={item.id}>
                  <Popconfirm
                    title="你确定删除这篇文章吗"
                    onConfirm={(e) => confirmdeletecomment(item.id)}
                    onCancel={cancel}
                    okText="Yes"
                    cancelText="No"
                  >
                    <span className="iconfont icon-shanchu"></span>
                  </Popconfirm>
                  <img src={user.avatar} alt="" />
                  <div className="content">
                    <div className="name">{user.username}</div>
                    <div className="content">{item.content}</div>
                    <div className="time">
                      {formattime(item.createAt)} {item.thumbcount}
                    </div>
                  </div>
                </div>
              ))
            ) : (
              <Empty />
            )}
          </div>
        )}
      </div>
    </Usermenuewrap>
  );
}
